import { ProTable } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm, message, Breadcrumb } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import ImportExcel from '../ImportExcel';
import ExportExcel from '@/components/ExportExcel2';
import styles from './index.less';

export default () => {
  //获取国别
  const getLike = useRequest((data = { field: 'country' }) => {
    return {
      url: `http://10.1.40.84:9993/getLike`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //获取学术委员会列表
  const getAllAcademicCommittee = useRequest((data = {}) => {
    return {
      url: `http://10.1.40.84:9993/committee/getAllAcademicCommittee`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //新增人员
  const addAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/committee/addAcademicCommitteeDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //更新人员
  const updateAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/committee/updateAcademicCommitteeDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //删除人员
  const deleteAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/committee/deleteAcademicCommitteeDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const confirm = (e: any) => {
    deleteAcademicCommitteeDetail.run({ id: e.id }).then(() => {
      getAllAcademicCommittee.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };
  const columns = [
    {
      title: '人员姓名',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
      width: 80,
    },
    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'year',
      key: 'year',
      valueType: 'dateYear',
      hideInTable: true,
    },
    {
      title: '类别',
      align: 'center',
      dataIndex: 'type',
      key: 'type',
      filters: true,
      onFilter: true,
      hideInSearch: true,
      width: 100,
      valueType: 'select',
      valueEnum: {
        其他: '其他',
        固定人员: '固定人员',
        流动人员: '流动人员',
      },
    },
    {
      title: '性别',
      align: 'center',
      dataIndex: 'gender',
      key: 'gender',
      hideInSearch: true,
      width: 50,
    },

    {
      title: '国别',
      align: 'center',
      dataIndex: 'country',
      key: 'country',
      hideInSearch: true,
      width: 70,
    },
    {
      title: '职称等级',
      align: 'center',
      dataIndex: 'technicalGrade',
      key: 'technicalGrade',
      hideInSearch: true,
      width: 80,
    },
    {
      title: '是否院士',
      align: 'center',
      dataIndex: 'isAcademician',
      key: 'isAcademician',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '工作单位',
      align: 'center',
      dataIndex: 'workUnit',
      key: 'workUnit',
      // ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'years',
      key: 'years',
      hideInSearch: true,
      render: (text: any) =>
        (text || [])?.sort().map((item: any, index: any) => {
          return <Tag key={index}>{item}</Tag>;
        }),
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 100,
      render: (text: any, record: any) => [
        <ModalForm
          title="编辑"
          trigger={<a> 编辑 </a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
            destroyOnClose: true,
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            updateAcademicCommitteeDetail.run(values).then(() => {
              getAllAcademicCommittee.run();
            });
            return true;
          }}
          key="1"
          initialValues={record}
          grid={true}
        >
          <ProForm.Group>
            <ProFormText colProps={{ span: 6 }} name="id" hidden />
            <ProFormText
              rules={[{ required: true, message: '请输入' }]}
              colProps={{ span: 6 }}
              name="name"
              label="姓名"
            />
            <ProFormSelect
              request={async () => [
                {
                  value: '固定人员',
                  label: '固定人员',
                },
                {
                  value: '流动人员',
                  label: '流动人员',
                },
                {
                  value: '其他',
                  label: '其他',
                },
              ]}
              colProps={{ span: 6 }}
              name="type"
              label="类别"
              rules={[{ required: true, message: '请选择' }]}
            />
            <ProFormSelect
              colProps={{ span: 6 }}
              options={[
                {
                  value: '男',
                  label: '男',
                },
                {
                  value: '女',
                  label: '女',
                },
              ]}
              name="gender"
              label="性别"
              rules={[{ required: true, message: '请选择' }]}
            />
            <ProFormSelect
              colProps={{ span: 6 }}
              options={getLike?.data}
              name="country"
              label="国别"
              rules={[{ required: true, message: '请选择' }]}
            />
            <ProFormSelect
              colProps={{ span: 6 }}
              options={[
                {
                  value: '正高级',
                  label: '正高级',
                },
                {
                  value: '副高级',
                  label: '副高级',
                },
                {
                  value: '中级',
                  label: '中级',
                },
                {
                  value: '初级',
                  label: '初级',
                },
                {
                  value: '其他',
                  label: '其他',
                },
              ]}
              name="technicalGrade"
              label="职称等级"
              rules={[{ required: true, message: '请选择' }]}
            />

            <ProFormSelect
              colProps={{ span: 6 }}
              options={[
                {
                  value: '中国工程院院士',
                  label: '中国工程院院士',
                },
                {
                  value: '中国科学院院士',
                  label: '中国科学院院士',
                },
                {
                  value: '否',
                  label: '否',
                },
              ]}
              name="isAcademician"
              label="是否院士"
              rules={[{ required: true, message: '请选择' }]}
            />
            <ProFormText
              colProps={{ span: 12 }}
              name="workUnit"
              label="工作单位"
              rules={[{ required: true, message: '请选择' }]}
            />
            <ProFormSelect
              colProps={{ span: 24 }}
              options={[
                {
                  value: 2026,
                  label: '2026',
                },
                {
                  value: 2025,
                  label: '2025',
                },
                {
                  value: 2024,
                  label: '2024',
                },
                {
                  value: 2023,
                  label: '2023',
                },
                {
                  value: 2022,
                  label: '2022',
                },
                {
                  value: 2021,
                  label: '2021',
                },
                {
                  value: 2020,
                  label: '2020',
                },
                {
                  value: 2019,
                  label: '2019',
                },
                {
                  value: 2018,
                  label: '2018',
                },
                {
                  value: 2017,
                  label: '2017',
                },
              ]}
              name="years"
              label="任职年份"
              mode="multiple"
              rules={[{ required: true, message: '请选择' }]}
            />
          </ProForm.Group>
        </ModalForm>,
        <Popconfirm
          key={'2'}
          title="确定删除吗？"
          onConfirm={() => confirm(record)}
          onCancel={() => cancel}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];

  const Refresh = () => {
    getAllAcademicCommittee.run();
  };

  return (
    <PageContainer
      header={{
        title: '选取年份查询后,绿色代表当年新加入人员，红色代表当年退出人员',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>队伍建设与人才培养</Breadcrumb.Item>
            <Breadcrumb.Item>学术委员会</Breadcrumb.Item>
          </Breadcrumb>
        ),
        // extra: [
        //   <ImportExcel
        //     key="1"
        //     tableName={'ACADEMIC_COMMITTEE'}
        //     Refresh={Refresh}
        //   />,
        //   <Button
        //     key="2"
        //     type="primary"
        //     onClick={() => {
        //       window.open(
        //         'http://10.1.40.84:9993/file/model/ACADEMIC_COMMITTEE_模板.xlsx ',
        //       );
        //     }}
        //   >
        //     下载模版
        //   </Button>,
        // ],
      }}
      // header={{
      //   extra: [
      //     <ImportExcel
      //       key="1"
      //       tableName={'ACADEMIC_COMMITTEE'}
      //       Refresh={Refresh}
      //     />,
      //     <Button
      //       key="2"
      //       type="primary"
      //       onClick={() => {
      //         window.open(
      //           'http://10.1.40.84:9993/file/model/ACADEMIC_COMMITTEE_模板.xlsx ',
      //         );
      //       }}
      //     >
      //       下载模版
      //     </Button>,
      //   ],
      // }}
    >
      <ProTable
        columns={columns}
        dataSource={getAllAcademicCommittee?.data || []}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          } else {
            return null;
          }
        }}
        loading={getAllAcademicCommittee?.loading}
        dateFormatter="string"
        headerTitle="人员列表"
        options={false}
        onReset={() => {
          getAllAcademicCommittee.run();
        }}
        onSubmit={(e) => {
          getAllAcademicCommittee.run(e);
        }}
        toolBarRender={() => [
          <div>
            <ExportExcel
              key="ExportExcel"
              dataSource={getAllAcademicCommittee?.data}
              columns={columns}
            />
            <ModalForm
              title="新增人员"
              trigger={
                <Button key="primary" type="primary">
                  新增人员
                </Button>
              }
              autoFocusFirstInput
              modalProps={{
                onCancel: () => console.log('run'),
              }}
              submitTimeout={2000}
              onFinish={async (values) => {
                addAcademicCommitteeDetail.run(values).then(() => {
                  getAllAcademicCommittee.run();
                });
                return true;
              }}
              key="1"
              grid={true}
            >
              <ProForm.Group>
                <ProFormText
                  colProps={{ span: 6 }}
                  name="name"
                  label="姓名"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormSelect
                  colProps={{ span: 6 }}
                  request={async () => [
                    {
                      value: '固定人员',
                      label: '固定人员',
                    },
                    {
                      value: '流动人员',
                      label: '流动人员',
                    },
                    {
                      value: '其他',
                      label: '其他',
                    },
                  ]}
                  name="type"
                  label="类别"
                  rules={[{ required: true, message: '请选择' }]}
                />
                <ProFormSelect
                  colProps={{ span: 6 }}
                  options={[
                    {
                      value: '男',
                      label: '男',
                    },
                    {
                      value: '女',
                      label: '女',
                    },
                  ]}
                  name="gender"
                  label="性别"
                  rules={[{ required: true, message: '请选择' }]}
                />
                <ProFormSelect
                  colProps={{ span: 6 }}
                  options={getLike?.data}
                  name="country"
                  label="国别"
                  rules={[{ required: true, message: '请选择' }]}
                />
                <ProFormSelect
                  colProps={{ span: 6 }}
                  options={[
                    {
                      value: '正高级',
                      label: '正高级',
                    },
                    {
                      value: '副高级',
                      label: '副高级',
                    },
                    {
                      value: '中级',
                      label: '中级',
                    },
                    {
                      value: '初级',
                      label: '初级',
                    },
                    {
                      value: '其他',
                      label: '其他',
                    },
                  ]}
                  name="technicalGrade"
                  label="职称等级"
                  rules={[{ required: true, message: '请选择' }]}
                />

                <ProFormSelect
                  colProps={{ span: 6 }}
                  options={[
                    {
                      value: '中国工程院院士',
                      label: '中国工程院院士',
                    },
                    {
                      value: '中国科学院院士',
                      label: '中国科学院院士',
                    },
                    {
                      value: '否',
                      label: '否',
                    },
                  ]}
                  name="isAcademician"
                  label="是否院士"
                  rules={[{ required: true, message: '请选择' }]}
                />
                <ProFormText
                  colProps={{ span: 12 }}
                  name="workUnit"
                  label="工作单位"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormSelect
                  colProps={{ span: 24 }}
                  options={[
                    {
                      value: 2026,
                      label: '2026',
                    },
                    {
                      value: 2025,
                      label: '2025',
                    },
                    {
                      value: 2024,
                      label: '2024',
                    },
                    {
                      value: 2023,
                      label: '2023',
                    },
                    {
                      value: 2022,
                      label: '2022',
                    },
                    {
                      value: 2021,
                      label: '2021',
                    },
                    {
                      value: 2020,
                      label: '2020',
                    },
                    {
                      value: 2019,
                      label: '2019',
                    },
                    {
                      value: 2018,
                      label: '2018',
                    },
                    {
                      value: 2017,
                      label: '2017',
                    },
                  ]}
                  name="years"
                  label="任职年份"
                  mode="multiple"
                  rules={[{ required: true, message: '请选择' }]}
                />
              </ProForm.Group>
            </ModalForm>
          </div>,
        ]}
      />
    </PageContainer>
  );
};
